---
layout: page
description: "不管这一天有多难过，记得认真洗脸冲澡"
header-mask: 0.2
---

<style>
    .post-list-thumb {
        opacity: 0;
    }
    .post-list-show {
        animation: post-list-show .5s;
        -webkit-animation: post-list-show .5s;
        opacity: 1
    }
    @media (max-width: 860px) {
        .post-list-thumb {
            opacity: 1;
        }
        .post-list-show {
            animation: none;
            -webkit-animation: none;
        }
    }
    @keyframes post-list-show {
        0% {
            opacity: 0;
            -webkit-transform: translateY(50px);
            transform: translateY(50px)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
    }
</style>

<div class="tops-title visible-md visible-lg">
    <hr>
    <h5><span class="fa fa-heart"></span> HOT</h5>
</div>
<div class="tops-content visible-md visible-lg">
    <ul>
        {% for post in site.posts %}
        {% if post.hot %}
        <a href="{{ site.baseurl }}{{ post.url }}" title="{{ post.title | escape }}" rel="friend">
            <li class="tops-item">
                <div class="tops-item-img">
                    <img data-original="/{{ post.header-img }}" class="lazy not-fancybox">
                </div>
                <div class="tops-item-title">
                    <h3><strong>{{ post.title | escape }}</strong></h3>
                    <p>{{ post.subtitle | escape }}</p>
                </div>
            </li>
        </a>
        {% endif %}
        {% endfor %}
    </ul>
</div>

<div class="tops-title">
    <hr class="hidden-sm hidden-xs">
    <h5><span class="fa fa-envira"></span> DISCOVERY</h5>
</div>
{% for post in paginator.posts %}
<div class="post-preview post-list-thumb{% if forloop.first %} post-list-show{% endif %}">
    <a href="{{ post.url | prepend: site.baseurl }}">
        <h2 class="post-title">
            {{ post.title }}
        </h2>
        {% if post.subtitle %}
        <h3 class="post-subtitle">
            {{ post.subtitle }}
        </h3>
        {% endif %}
        <div class="post-content-preview">
            {{ post.content | strip_html | truncate:200 }}
        </div>
    </a>
    <p class="post-meta">
        Posted by
        {% if post.author %}{{ post.author }}{% else %}{{ site.title }}{% endif %}
        on {{ post.date | date: "%B %-d, %Y" }}
    </p>
    <hr>
</div>
{% endfor %}

<div class="pager-num">
    <span>
        <strong>&nbsp;当前页 {{ paginator.page }}&nbsp;&nbsp;/&nbsp;&nbsp;总页数 {{ paginator.total_pages }}</strong>
    </span>
</div>

<!-- Pager -->
{% if paginator.total_pages > 1 %}
<ul class="pager">
    {% if paginator.previous_page %}
    <li class="previous">
        <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&larr; Newer Posts</a>
    </li>
    {% endif %}
    {% if paginator.next_page %}
    <li class="next">
        <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Older Posts &rarr;</a>
    </li>
    {% endif %}
</ul>
{% endif %}

<script>
    function post_list_show_animation() {
        if ($(".post-preview").hasClass("post-list-thumb")) {
            var options = {
                root: null,
                threshold: [0.25]
            }
            var io = new IntersectionObserver(callback, options);
            var articles = document.querySelectorAll('.post-list-thumb');

            function callback(entries) {
                entries.forEach((article) => {
                    if (!window.IntersectionObserver) {
                        article.target.style.willChange = 'auto';
                        if( article.target.classList.contains("post-list-show") === false){
                            article.target.classList.add("post-list-show");
                        }
                    } else {
                        if (article.target.classList.contains("post-list-show")) {
                            article.target.style.willChange = 'auto';
                            io.unobserve(article.target)
                        } else {
                            if (article.isIntersecting) {
                                article.target.classList.add("post-list-show");
                                article.target.style.willChange = 'auto';
                                io.unobserve(article.target)
                            }
                        }
                    }
                })
            }
            articles.forEach((article) => {
                io.observe(article)
            })
        }
    }
    post_list_show_animation();
</script>
